<template>
	<div>
    <div class="shoppingPro" v-for="item in content">
      <div class="shoppingProOne">
        <!--<div class="shoppingProTwo">
          <div v-if="item.isSelect" class="shoppingProThree">
            <i class="el-icon-check"></i>
          </div>
          <div v-if="item.isSelect" class="shoppingProFour">
            <i class="el-icon-check"></i>
          </div>
        </div>-->
      </div>
      <div class="shoppingProFive">
        <img :src="item.comShowMaxImgGroup" class="shoppingProSix">
      </div>
      <div class="shoppingProSeven" style="">
      <span class="comMsg">
        {{item.currentSerName}}&nbsp;&nbsp;{{item.currentColor}}&nbsp;&nbsp;{{item.currentConfig}}
      </span>
      </div>
      <div class="shoppingProEight">
        ￥{{item.comPrice}}
      </div>
      <div class="shoppingProNine"><!--此处存放数量-->
        x{{item.buyNum}}
        <!--<button-update-num @updateemit="updateNumEmit($event,item.comId)" :curr-val="item.proNum"/>-->
      </div>
      <div class="deleteButton">
        <!--<div class="deleteButtonOne" @click="centerDialogVisible = true">&lt;!&ndash;显示删除图标&ndash;&gt;
          <i class="el-icon-delete" style="font-size: 20px;"></i>
        </div>-->
      </div>
      <div v-if="item.serviceName" class="shoppingProTen">
        <div class="shoppingProEleven">
          <el-button type="warning" plain disabled size="mini">服务</el-button>&nbsp;&nbsp;&nbsp;
          {{isShow(item,0)}}
        </div>
        <div class="shoppingProTwelve">￥{{isShow(item,1)}}</div>
        <div class="shoppingProThirteen">x1</div>
      </div>
      <!--这是弹出层内容-->
      <!--<el-dialog
        title="提示"
        v-model="centerDialogVisible"
        width="30%"
        :modal="false"
        center>
        <span>需要注意的是内容是默认不居中的</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteShoppingPro(item.comId)">确 定</el-button>
          </span>
        </template>
      </el-dialog>-->
    </div>
  </div>
</template>

<script>
  export default {
    name: "OrderComShow",
    props: {
      contents: {
        type: Object
      }
    },
    watch: {
      contents(newVal,oldVal){
        this.content = newVal;
      }
    },
    methods: {
      isShow(item, index) {//这是提供给保修服务显示的方法
        if (!item.serviceName) return "";
        return item.serviceName.split("￥")[index]
      },
    },
    data(){
      return {
        content: this.contents
      }
    }
  }
</script>

<style scoped>
  .shoppingPro {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-top: #e7e7e7 solid 1px;
  }
  .shoppingProOne {
    width: 30px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .shoppingProFive {
    width: 150px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shoppingProSix {
    width: 60px;
    height: 60px;
    cursor: pointer
  }
  .shoppingProSeven {
    width: 300px;
    height: 120px;
    display: flex;
    align-items: center;
  }
  .shoppingProEight {
    width: 100px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shoppingProNine {
    width: 350px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shoppingProTen {
    width: 850px;
    height: 80px;
    margin-left: 180px;
    display: flex;
    border-top: #e7e7e7 solid 1px
  }
  .shoppingProEleven {
    width: 35%;
    display: flex;
    align-items: center
  }
  .shoppingProTwelve {
    width: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .shoppingProThirteen {
    width: 41%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
